import { banner as BannerApi } from '../../../../../config/request.js';
import resources from '../../../../../util/resources.js';


module.exports = {
    name: 'banner',
    data() {
        return {
            bannerForm: {
                title: '',
                url: '',
                image: '',
                describe: '',
                remark: ''
            },
            addFormVisible: false,
            tableData: [],
            status: {
                info: { prop: 'status', label: 'banner状态', sortable: true },
                filter: {
                    list: [{
                        text: '启用',
                        value: 1
                    }, {
                        text: '禁止',
                        value: 0
                    }],
                    multiple: false
                },
                style: { align: 'center' }
            },
            title: {
                info: { prop: 'title', label: 'banner名称', sortable: false },
                filter: {},
                style: { align: 'center' }
            },
            remark: {
                info: { prop: 'remark', label: 'banner备注', sortable: false },
                filter: {},
                style: { align: 'center' }
            },
            describe: {
                info: { prop: 'describe', label: 'banner描述', sortable: false },
                filter: {},
                style: { align: 'center' }
            },
            rules: {
                title: [
                    { required: true, message: '请输入banner名称', trigger: 'blur' },
                ],
                image: [
                    { required: true, message: '请输入banner图片路径', trigger: 'blur' },
                ],
                url: [
                    { required: true, message: '请输入banner跳转路径', trigger: 'blur' },
                ],
            },
        }
    },

    methods: {
        /**
         * 格式化状态
         */
        formatterStatu(item) {
            return item.status == 1 ? '启动' : '禁止';
        },
        /**
         * 过滤状态
         */
        filterStatu(value, item) {
            return item.status == value;
        },

        /**
         * 过滤banner状态
         */
        filterType(value, item) {
            return item.type == value;
        },
        /**
         * 格式化banner状态
         * 
         * @param {any} item 
         * @returns 
         */
        formatterType(item) {
            for (let i in resources.eType) {
                if (item.type == resources.eType[i].value) {
                    return resources.eType[i].label
                }
            }
        },
        /** 提交表单 */
        submitForm(formName) {
            console.log(this[formName]);
            var that = this;
            var banner = { status: 0 };
            Object.assign(banner, this[formName]);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //添加banner
                    BannerApi.createBanner.call(this, banner,
                        //添加成功
                        (data) => {
                            const newBanner = data['banner'];
                            Object.assign(newBanner, { checked: newBanner.status == 1 });
                            this.tableData.push(newBanner);
                            this.$message.success('添加banner成功 ！！');
                            this.addFormVisible = false;
                            that.bannerForm = {
                                title: '',
                                url: '',
                                image: '',
                                describe: '',
                                remark: ''
                            }
                            this.$refs[formName].resetFields();
                            console.log(this.bannerForm)
                        },
                        //添加失败
                        (msg) => {
                            this.$message.error('添加问题失败 ！！');
                        })
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        /** 删除 */
        onDeleteBanner(banner, index) {
            this.$confirm('是否确认删除该banner？', '提示', {
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                type: 'warning'
            }).then(_ => {
                this.tableData.splice(index, 1);
                BannerApi.deleteBanner.call(this, {
                    id: banner.id,
                }, data => {
                    this.$message.success('删除成功');
                })
            }).catch(_ => {});
        },
        /** 置顶 */
        onMoveTop(banner, index) {
            this.$confirm('是否确认置顶该banner？', '提示', {
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                type: 'warning'
            }).then(_ => {
                this.tableData.splice(index, 1);
                BannerApi.moveTop.call(this, {
                    id: banner.id,
                }, data => {
                    this.$message.success('置顶成功');
                    const newBanner = data['banner'];
                    Object.assign(newBanner, { checked: newBanner.status == 1 });
                    this.tableData.splice(0, 0, newBanner);
                })
            }).catch(_ => {});
        },
        /**
         * 启用或禁用该banner
         * 
         * @param {any} banner 
         */
        onCheckedChange(banner) {
            BannerApi.updateBanner.call(this, {
                id: banner.id,
                status: banner.checked ? 1 : 0
            }, data => {
                banner.status = data.banner.status;
                this.$message.success(data.banner.status == 1 ? '已经启用' : '已经禁用');
            })

        },
        initData() {
            //查询所有数据
            this.getBannerData();
        },
        checkLevel() {
            var user = this.$store.state.user.userinfo;
            // console.log('user', user);
            return user && user.level == 1;
        },
        getBannerData() {
            var that = this;
            BannerApi.queryAll.call(this, (data) => {
                console.log(data);
                data.banners.forEach(banner => {
                    Object.assign(banner, { checked: banner.status == 1 });
                });
                this.tableData = data.banners;
            });
        },
    },

    mounted: function() {
        this.initData();
    }
}